<template>
  <div>
    <el-row>
      <el-input placeholder="请输入内容" style="width:200px;margin-right:10px"></el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button>清空</el-button>
    </el-row>
    <el-row>
      <el-button type="primary">添加</el-button>
      <el-button type="warning">批量删除</el-button>
    </el-row>
    <el-row>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="80" type="index" align="center">
        </el-table-column>
        <el-table-column prop="prop" label="用户名" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="用户昵称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="prop" label="权限列表" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="prop" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="prop" label="更新时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="prop" label="操作" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination @size-change="3" @current-change="1" :current-page.sync="currentPage" :page-sizes="[3,5,10]" :page-size="5" layout=" prev, pager, next, jumper,->,total, sizes" :total="50" background>
        :pager-count="7">
      </el-pagination>

    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1
    }
  },
  methods: {
    handleSelectionChange() {}
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin: 15px 0;
}
</style>